<template>
           <div class="box">
                <header>
                     <i class="iconfont icon-weibiaoti-- fh" @click="back" ></i>
                     <span class="title">联系信息</span>
               </header>
               <h1 style="width:100%;height:1.88rem;"></h1>
               <div class="main">
                     <p class="hint">为了不影响借款，请填写真实信息，卡帮帮将保障您的信息安全。</p>
                     <div class="grxx">
                           <p class="textss">个人信息</p>
                           <div class="detail1">
                                 <main>
                                     <span>真实姓名</span>
                                     <input type="text" v-model="username" placeholder="请填写您的真实姓名">
                                 </main>
                                 <main>
                                     <span>身份证号码</span>
                                     <input type="number" v-model="userid" oninput="if(value.length>18)value=value.slice(0,18)" placeholder="请填写身份证号码" >
                                 </main>
                                 <main>
                                     <span>现居住地址</span>
                                     <input type="text" readonly="readonly" v-model="site" @click="xzdz" >
                                 </main>
                                 <main style="border:none;">
                                     <span>详细地址</span>
                                     <input type="text" v-model="detail" placeholder="无需重复填写省/市/区县" >
                                 </main>
                           </div>
                     </div>
                     <div class="grxx">
                           <p class="textss">联系方式</p>
                           <div class="detail1" style="height:5.84rem;" >
                                 <main>
                                     <span>邮箱</span>
                                     <input type="text" v-model="email" placeholder="用于接收账单信息">
                                 </main>
                                 <main>
                                     <span>微信号</span>
                                     <input type="text" v-model="vx" placeholder="请填写" >
                                 </main>
                                 <main style="border:none;">
                                     <span>QQ号</span>
                                     <input type="text" v-model="qq" placeholder="请填写" >
                                 </main>
                           </div>
                     </div>
                     <div class="grxx" style="height:20rem;" >
                           <p class="textss">紧急联系人 <b style="color:#1b88fd;" >（建议填写常用联系人）</b></p>
                           <div class="detail1" style="height:9rem" >
                                 <!-- <h4>亲属联系方式</h4> -->
                                 <group>
                                        <x-input title="直系亲属" style="font-size:0.54rem;border:none" v-model="lxrAname"  placeholder="请输入" type="text"></x-input>
                                        <x-input title="直系亲属电话" style="font-size:0.54rem;" v-model="lxrAphone" :required="true" type="text"  placeholder="请选择" :disabled="lxrAdisabled" @click.native="hqcontact"></x-input>  
                                 </group>
                                 
                                 <group>
                                        <x-input title="朋友姓名" style="font-size:0.54rem;" v-model="lxrBname"  placeholder="请输入" type="text"></x-input>
                                        <x-input title="朋友联系方式" style="font-size:0.54rem;" v-model="lxrBphone" :required="true" type="text" placeholder="请选择" :disabled="lxrBdisabled" @click.native="hqcontactB"></x-input>   
                                 </group>
                                 <group>
                                        <x-input title="同事姓名" style="font-size:0.54rem;" v-model="lxrCname"  placeholder="请输入" type="text"></x-input>
                                        <x-input title="同事联系方式" style="font-size:0.54rem;" v-model="lxrCphone" :required="true" type="text" placeholder="请选择" :disabled="lxrCdisabled" @click.native="hqcontactl"></x-input>   
                                 </group>
                                 <group>
                                        <x-input title="紧急联系人姓名" style="font-size:0.54rem;" v-model="lxrDname"  placeholder="请输入" type="text"></x-input>
                                        <x-input title="紧急联系人电话" style="font-size:0.54rem;" v-model="lxrDphone" :required="true" type="text" placeholder="请选择" :disabled="lxrCdisabled" @click.native="hqcontactD"></x-input>   
                                 </group>
                           </div>
                     </div>
                     
               </div>
               <div class="xxx" style="width:100%;display:none;" >          	  
	          	  <div id="sjld" style="">
	          	  	<h1 class="xz">
	                   <span @click="qx" class="sss">取消</span>
	                   <span @click="qd" class="sss" style="text-align:right;">确定</span>
		              </h1> 
		             <div class="boxxx" style="width:100%;" >
		                <mt-picker class="ld" :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
		             </div>
	          	  </div>              
              </div>
               <footer style="height:1.96rem;"></footer>
               <button @click="tj">提交</button>
           </div>
</template>

<script>
import $ from 'jquery'
import { Picker } from 'mint-ui';
import myaddress from '../../static/address3.json' //引入省市区数据
import { Group,Cell,Box,XButton,XDialog, TransferDomDirective as TransferDom, Datetime, XInput, PopupPicker,XTextarea } from "vux";

export default {
        data(){
            return{
                qq:"",
                vx:"",
                email:"",
                detail:"",
                userid:"",
                username:"",
                site:"请选择地址",
                lxrAname:'',
                lxrAphone:'',
                lxrAdisabled:true,
                lxrBname:'',
                lxrBphone:'',
                lxrBdisabled:true,
                lxrCname:'',
                lxrCphone:'',
                lxrCdisabled:true,
                lxrDname:'',
                lxrDphone:'',
                lxrDdisabled:true,
                token:"",
                myAddressSlots: [
				   {
				   flex: 1,
				   defaultIndex: 1, 
				   values: Object.keys(myaddress), //省份数组
				   className: 'slot1',
				   textAlign: 'center'
				   }, {
				   divider: true,
				   content: '-',
				   className: 'slot2'
				   }, {
				   flex: 1,
				   values: [],
				   className: 'slot3',
				   textAlign: 'center'
				   },
				   {
				   divider: true,
				   content: '-',
				   className: 'slot4'
				   },
				   {
				   flex: 1,
				   values: [],
				   className: 'slot5',
				   textAlign: 'center'
				   }
				  ],
				  myAddressProvince:'省',
				  myAddressCity:'市',
				  myAddresscounty:'区/县',
				  }
				 },
        
        components: {
        'mt-picker': Picker,Group,Cell,Box,XButton,XDialog,Datetime,XInput,PopupPicker,XTextarea
    },
    props: {},
       methods:{
          back(){
            var that = this  
            var btnArray = ['狠心离开', '不放弃'];
            mui.confirm('差一点点就能拿到钱了，确定这时候放弃吗？','', btnArray, function(e) {
        if (e.index == 0) {
        	   that.$router.go(-1)
        } else {
            } 
         })
       }, 
       onMyAddressChange(picker, values) {
				  if(myaddress[values[0]]){ 
				   picker.setSlotValues(1,Object.keys(myaddress[values[0]])); 
				   picker.setSlotValues(2,myaddress[values[0]][values[1]]); 
				   this.myAddressProvince = values[0];
				   this.myAddressCity = values[1];
				   this.myAddresscounty = values[2];
				  }
			  },	  
        tj(){
             if(this.username==''||!(/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/.test(this.username)))return mui.toast("您输入的真实姓名有误");
             if(this.userid=="" || !(/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(this.userid))) return mui.toast("您输入的身份证号码有误");
             if(this.site=="请选择地址")return mui.toast("请选择地址")
             console.log(this.site)
             if(!this.detail) return mui.toast("请填写详细地址 如街道门牌号！")
             if(this.email =='' || !(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email))) return mui.toast("请正确输入邮箱地址")
             if(!this.vx) return mui.toast("请填写微信号")
             if(this.qq =='' || !(/[1-9][0-9]{4,14}/.test(this.qq))) return mui.toast("请填写QQ号码")
                if(!this.lxrAname) return mui.toast('请填写直系亲属姓名'); 
                if(!this.lxrAphone) return mui.toast('请填写选择直系亲属电话'); 
                if(!this.lxrBname) return mui.toast('请填写同事姓名'); 
                if(!this.lxrBphone) return mui.toast('请填写选择同事电话'); 
                if(!this.lxrCname) return mui.toast('请填写朋友姓名');
                if(!this.lxrCphone) return mui.toast('请填写选择朋友电话');
                if(!this.lxrDname) return mui.toast('请填写紧急联系人姓名');
                if(!this.lxrDphone) return mui.toast('请填写选择紧急联系人电话')                
	             this.token = localStorage.getItem('Token')
//	             console.log(this.token)
	             console.log(this.site)
	             var qs = require('qs')
	             this.$http.post('/api/auth/auth_contact',qs.stringify({
                     'token':this.token,
                     'address':this.site,
                     'address_detail':this.detail,
                     'email':this.email,
                     'wechat':this.vx,
                     'qq':this.qq,
                     "relatives":this.lxrAname,
                     'relatives_phone':this.lxrAphone,
                     'partner':this.lxrBname,
                     'partner_phone':this.lxrBphone,
                     'friend':this.lxrCname,
                     'friend_phone':this.lxrCphone,
                     'emer_con':this.lxrDname,
                     'emer_con_phone':this.lxrDphone,
             }))
             .then(res=>{
             	  console.log(res)
                 if(res.data.code=="200"){
                     mui.toast("资料提交成功")
                      this.$router.go(-1)
                 }else{
                     mui.toast("资料填写有误，请检查")
                     console.log(res)
                 }
                 
             })
             
        },
        qx(){
            $(".xxx").css("display","none")
             },
        qd(){  	    
            $(".xxx").css("display","none")
            var sites = this.myAddressProvince+this.myAddressCity+this.myAddresscounty
            this.site = sites
		  },
		xzdz(){
		  	   $(".xxx").css("display","block")
		},
//      xzdz(){
//            var users = [this.username,this.userid]
//            var userdata = JSON.stringify(users)
//            localStorage.setItem("userdatas",userdata)
//            this.$router.push({name:'sjld'})
//        },
         hqcontact(){
            const _this = this;
            mui.plusReady(()=>{
                // 扩展API加载完毕，现在可以正常调用扩展API
                plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
                           addressbook.find(["displayName", "phoneNumbers"], function(contacts) {
                            console.log(JSON.stringify(contacts));
                            const payloadh = {booklist:JSON.stringify(contacts)};
                            var ttkk = localStorage.getItem('Token')
                            var qs = require('qs')
                            _this.$http.post('/api/auth/getBook',qs.stringify({'token':ttkk,'list':payloadh}))
                            .then(res=>{
                            	console.log(res.data.code)
                                console.log('获取成功');
                            })
                           //for(var i = 0, len = contacts.length; i < len; i++) {
                                //if(contacts[i].phoneNumbers.length > 0){
                                    //console.log(contacts[i].displayName,contacts[i].phoneNumbers[0].value) 
                               // }
                           // }
                        }, function() {
                            mui.toast("获取电话簿失败 ");
                        }, {
                            multiple: true
                        });
                }, function(e) {
                    mui.toast("获取电话簿失败 " + e.message);
                });

                if( _this.lxrAdisabled == false){
                    return false;
                }

               var REQUESTCODE = 1000;
               var main = plus.android.runtimeMainActivity();
                var Intent = plus.android.importClass('android.content.Intent');
                var ContactsContract = plus.android.importClass('android.provider.ContactsContract');
                var intent = new Intent(Intent.ACTION_PICK, ContactsContract.Contacts.CONTENT_URI);
                main.onActivityResult = function(requestCode, resultCode, data) { 
                  if (REQUESTCODE == requestCode) {
                    var phoneNumber = null;
                    var resultString = "";
                    var context = main;
                    plus.android.importClass(data);
                    var contactData = data.getData();
                    var resolver = context.getContentResolver();
                    plus.android.importClass(resolver);
                    var cursor = resolver.query(contactData, null, null, null, null);
                    plus.android.importClass(cursor);
                    cursor.moveToFirst();
                    var s_ret;
                    var givenName = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts.DISPLAY_NAME));
                    s_ret = givenName;
                    var contactId = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts._ID));
                    var pCursor = resolver.query(ContactsContract.CommonDataKinds.Phone.CONTENT_URI,
                     null, ContactsContract.CommonDataKinds.Phone.CONTACT_ID + " = " + contactId,
                     null, null);
                    while (pCursor.moveToNext()) {
                     phoneNumber =   pCursor.getString( pCursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER));
                     //s_ret += '\n' + phoneNumber;
                    }
                    if(phoneNumber==''){
                       _this.lxrAdisabled = false;
                       //phoneNumber = contactId;
                    }
                    if(s_ret!=''){
                        //  _this.lxrAname = s_ret;
                         _this.lxrAphone = phoneNumber;
                    }
                    cursor.close();
                    pCursor.close();
                  }
                };
                main.startActivityForResult(intent, REQUESTCODE);
              });
        },
        hqcontactB(){
            const _this = this;
            mui.plusReady(()=>{
                if( _this.lxrBdisabled == false){
                    return false;
                }
               var REQUESTCODE = 1000;
               var main = plus.android.runtimeMainActivity();
                var Intent = plus.android.importClass('android.content.Intent');
                var ContactsContract = plus.android.importClass('android.provider.ContactsContract');
                var intent = new Intent(Intent.ACTION_PICK, ContactsContract.Contacts.CONTENT_URI);
                main.onActivityResult = function(requestCode, resultCode, data) { 
                  if (REQUESTCODE == requestCode) {
                    var phoneNumber = null;
                    var resultString = "";
                    var context = main;
                    plus.android.importClass(data);
                    var contactData = data.getData();
                    var resolver = context.getContentResolver();
                    plus.android.importClass(resolver);
                    var cursor = resolver.query(contactData, null, null, null, null);
                    plus.android.importClass(cursor);
                    cursor.moveToFirst();
                    var s_ret;
                    var givenName = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts.DISPLAY_NAME));
                    s_ret = givenName;
                    var contactId = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts._ID));
                    var pCursor = resolver.query(ContactsContract.CommonDataKinds.Phone.CONTENT_URI,
                     null, ContactsContract.CommonDataKinds.Phone.CONTACT_ID + " = " + contactId,
                     null, null);
                    while (pCursor.moveToNext()) {
                     phoneNumber =   pCursor.getString( pCursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER));
                     //s_ret += '\n' + phoneNumber;
                    }

                    if(phoneNumber==''){
                       _this.lxrBdisabled = false;
                       //phoneNumber = contactId;
                    }

                    if(s_ret!=''){
                        // _this.lxrBname = s_ret;
                        _this.lxrBphone = phoneNumber;
                    }
                    cursor.close();
                    pCursor.close();
                  }
                };
                main.startActivityForResult(intent, REQUESTCODE);
            });
        },
        hqcontactl(){
            const _this = this;
            mui.plusReady(()=>{
                if( _this.lxrCdisabled == false){
                    return false;
                }
               var REQUESTCODE = 1000;
               var main = plus.android.runtimeMainActivity();
                var Intent = plus.android.importClass('android.content.Intent');
                var ContactsContract = plus.android.importClass('android.provider.ContactsContract');
                var intent = new Intent(Intent.ACTION_PICK, ContactsContract.Contacts.CONTENT_URI);
                main.onActivityResult = function(requestCode, resultCode, data) { 
                  if (REQUESTCODE == requestCode) {
                    var phoneNumber = null;
                    var resultString = "";
                    var context = main;
                    plus.android.importClass(data);
                    var contactData = data.getData();
                    var resolver = context.getContentResolver();
                    plus.android.importClass(resolver);
                    var cursor = resolver.query(contactData, null, null, null, null);
                    plus.android.importClass(cursor);
                    cursor.moveToFirst();
                    var s_ret;
                    var givenName = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts.DISPLAY_NAME));
                    s_ret = givenName;
                    var contactId = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts._ID));
                    var pCursor = resolver.query(ContactsContract.CommonDataKinds.Phone.CONTENT_URI,
                     null, ContactsContract.CommonDataKinds.Phone.CONTACT_ID + " = " + contactId,
                     null, null);
                    while (pCursor.moveToNext()) {
                     phoneNumber =   pCursor.getString( pCursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER));
                     //s_ret += '\n' + phoneNumber;
                    }

                    if(phoneNumber==''){
                       _this.lxrCdisabled = false;
                       //phoneNumber = contactId;
                    }

                    if(s_ret!=''){
                        // _this.lxrCname = s_ret;
                        _this.lxrCphone = phoneNumber;
                    }
                    cursor.close();
                    pCursor.close();
                  }
                };
                main.startActivityForResult(intent, REQUESTCODE);
            });
        },
        hqcontactD(){
            const _this = this;
            mui.plusReady(()=>{
                if( _this.lxrDdisabled == false){
                    return false;
                }
               var REQUESTCODE = 1000;
               var main = plus.android.runtimeMainActivity();
                var Intent = plus.android.importClass('android.content.Intent');
                var ContactsContract = plus.android.importClass('android.provider.ContactsContract');
                var intent = new Intent(Intent.ACTION_PICK, ContactsContract.Contacts.CONTENT_URI);
                main.onActivityResult = function(requestCode, resultCode, data) { 
                  if (REQUESTCODE == requestCode) {
                    var phoneNumber = null;
                    var resultString = "";
                    var context = main;
                    plus.android.importClass(data);
                    var contactData = data.getData();
                    var resolver = context.getContentResolver();
                    plus.android.importClass(resolver);
                    var cursor = resolver.query(contactData, null, null, null, null);
                    plus.android.importClass(cursor);
                    cursor.moveToFirst();
                    var s_ret;
                    var givenName = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts.DISPLAY_NAME));
                    s_ret = givenName;
                    var contactId = cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts._ID));
                    var pCursor = resolver.query(ContactsContract.CommonDataKinds.Phone.CONTENT_URI,
                     null, ContactsContract.CommonDataKinds.Phone.CONTACT_ID + " = " + contactId,
                     null, null);
                    while (pCursor.moveToNext()) {
                     phoneNumber =   pCursor.getString( pCursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER));
                     //s_ret += '\n' + phoneNumber;
                    }

                    if(phoneNumber==''){
                       _this.lxrDdisabled = false;
                       //phoneNumber = contactId;
                    }

                    if(s_ret!=''){
                        // _this.lxrCname = s_ret;
                        _this.lxrDphone = phoneNumber;
                    }
                    cursor.close();
                    pCursor.close();
                  }
                };
                main.startActivityForResult(intent, REQUESTCODE);
            });
        }
},
       
       mounted(){
//          var userlist = JSON.parse(localStorage.getItem("userdatas"))
//          if(!userlist){
//              this.username = ""
//              this.userid = ""
//          }else{
//               for(let k=0;k<userlist.length;k++){
//               this.username = userlist[0]
//               this.userid = userlist[1]
//             }
//          }
//          var sitelist = JSON.parse(localStorage.getItem("datasite"))
//          if(!sitelist){
//             this.site = "请选择地址"
//            }else{
//                  for(let i=0;i<sitelist.length;i++){
//              this.site = sitelist[0]+'-'+sitelist[1]+'-'+sitelist[2]
//              }
//          }
//          this.$nextTick(() => {
//			  this.myAddressSlots[0].defaultIndex = 0 
//			  });
		 }
         
       
}
</script>

<style lang="less" scoped>
        header{
               position:fixed;
               top:0;
               width:100%;
               height:1.88rem;
               display:flex;
               position: fixed;
               top:0;
               z-index:100;
               background: #fff;
         }
         .fh{
             width:2.1rem;
             line-height:1.88rem;
             text-align:center;
             z-index:100; 
             color:#333333;
             font-size:0.76rem;  
         }
         .title{
               font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#333333;
               letter-spacing:0.02rem;
               position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
         .main{
             width:100%;
             background:#f3f3f3;
             display:flex;
             flex-direction:column;
         }
         .hint{
             color:#f0341d;
             font-size:0.48rem;
             margin-bottom: 0.5rem;
             letter-spacing:0.04rem;
         }
         .textss{
             font-size:0.54rem;
             color:#707070;
             margin-bottom:0.7rem;
         }
         .grxx{
             width:90%;
             background:#f3f3f3;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             margin-bottom: 0.5rem;
         }
         .detail1{
             width:100%;
             height:7.8rem;
             background:#fff;
             border-radius:0.18rem;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
         }
         main{
             width:95%;
             border-bottom: 0.02rem solid #dfdfdf;
             height:1.96rem;
             display:flex;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             padding:0 2%;
         }
         span{
             width:40%;
             line-height: 1.96rem;
             font-size:0.54rem;
             color:#302f2f;
         }
         input::-webkit-input-placeholder{ /*WebKit browsers*/
            color: #c6c6c6;
            }
            input::-moz-input-placeholder{ /*Mozilla Firefox*/
            color: #c6c6c6;
            }
            input::-ms-input-placeholder{ /*Internet Explorer*/ 
            color: #c6c6c6;
        }
         input{
             position: relative;
             top:0;
             bottom:0;
             margin:auto 0;
             border:none;
             font-size:0.54rem;
         }
         .dzl{
             width:60%;
             height:1.96;
             background:yellow;
             line-height: 1.96rem;
         }
         h4{
             font-size:0.5rem;
             padding-top:0.7rem;
             padding-left:3%;
         }
     
      button{
      	  border:none;
          width:100%;
          background:#30aafe;
          font-size:0.7rem;
          letter-spacing:0.5rem;
          color:#fff;
          position: fixed;
          bottom:0;
          height:1.76rem;
      }
      .vux-no-group-title{
          margin-top:-0.23rem;
      }
      .xxx{
            position:fixed;
            bottom:8.66rem;
       }
       .ld{
           width:100%;
       }
       .xz{
            width:100%;
            height:1.5rem;
            display:flex;
            justify-content:space-between;
            background:#fff;
       }
       .sss{
            font-size:0.6rem;
            line-height:1.5rem;
            padding-left:10%;
            padding-right:10%;
            color:#2eb3e8;
       }
       .boxxx{
            position:fixed;
            bottom:1.76rem;
            height:6.9rem;
            background:#fff;

       }
        
</style>
<style scoped lang="less">
    @import '~vux/src/styles/close';
    #information{width: 100%;height: 100%;background: #f0f0f0;}
    .add_info{background-color: #fff;width: 100%;}
    .banklist{height: 76%;overflow-y: scroll;}

</style>  
<style>
.weui-cell{
     margin-top:0 !important;
}
.vux-no-group-title{
    margin-top:0 !important;
}
.weui-cells:after{
      display:none;
}
</style>

